<template>
	<div class='employRostert'>

		<!-- 标题区域 开始 -->

		<section class="title">
			<h1>干部花名册</h1>
		</section>

      <div class="formTop-right2" >
        <h2 @click='searchVisible= !searchVisible'>最近使用的搜索条件<i v-if='searchVisible' class="fa fa-minus"></i><i v-else class="fa fa-plus"></i></h2>
        <el-collapse-transition>
          <div v-show = 'searchVisible'>
            <p v-for='(k,i) in searchCheckList' v-if='searchCheckList.length'>
              <el-checkbox v-model.trim='searchCheckModel[i]' @change='handleSearchCheck(i)' class='check'></el-checkbox>
              <span @click='spanClick(i)' class='name' :class='{select:searchCheckModel[i]}' :title='k.conditionName'>{{k.conditionName}}</span>
              <i @click.stop='deleteClick(i)' class='el-icon-circle-cross' style='color:#CECECE'></i>
            </p>
            
            
          </div>

        </el-collapse-transition> 
       
      </div> 
       <el-dialog
              title='提示'
              :visible.sync="visible2"
              :lock-scroll='false'
              size='tiny'
              v-model.trim="visible2">
              <p style="padding:10px 0">确定删除该搜索条件吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary"  @click="sureDelete">确定</el-button>
              </div>
            </el-dialog>

		<!-- 标题区域 结束 -->

		<section class="form">

			<el-form  label-position="right" label-width="150px">
				<el-collapse v-model.trim="activeNames">

					<el-collapse-item title="基本信息" name="1">

						<el-col :span='12'>

              <el-form-item label='高管单位'>
								<el-col :span='16'>
									<el-select clearable size='small' style='width:100%' v-model.trim='form.c_leader_unit'>
										<el-option v-for='(k,i) in cxoOption' :label='k.c_lea_unit_name' :value='k.c_leader_unit'></el-option>
									</el-select>
								</el-col>
							</el-form-item>

							<el-form-item label='姓名'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.name'></el-input>
								</el-col>
							</el-form-item>

					  	<el-form-item label='员工ID' style="display:none">
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.emplid'></el-input>
								</el-col>
							</el-form-item> 


              <el-form-item label='职务'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.c_current_job'></el-input>
								</el-col>
							</el-form-item>

  
              <el-form-item label='出生地'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.birthplace'></el-input>
								</el-col>
							</el-form-item>

             
             

              

              <el-form-item label='政治面貌'>
								<el-col :span='16'>
									<el-select clearable size='small' v-model.trim="form.political_sta_chn" style='width:100%'>
										<el-option v-for='(k,i) in zzmmOption' :value='k.political_sta_chn_desc' :label='k.political_sta_chn_desc'></el-option>
									</el-select>
								</el-col>
							</el-form-item>

              <el-form-item label='参加工作时间'>

								<el-col :span='16' style="overflow:hidden">
									<el-date-picker 
										size='small' 
										style='width:46%;float:left'
										 v-model.trim="form.begin_c_work_time"
										  @change='(value) => form.begin_c_work_time = value'
										 :editable = 'false'
										  type="month" format='yyyy.MM'>
									</el-date-picker>
									&nbsp;-
									<el-date-picker 
                  :editable = 'false'
										size='small' 
										style='width:46%;float:right'
										 v-model.trim="form.end_c_work_time"
										  @change='(value) => form.end_c_work_time = value'
										 	type="month" format='yyyy.MM'>
									</el-date-picker>
								</el-col>

							</el-form-item>


              

						
						</el-col>

						<el-col :span='12' class="check-box">
							<el-form-item label='籍贯'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.native_place_chn'></el-input>
								</el-col>
							</el-form-item>

							<el-form-item label='民族'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.ethnic_grp'></el-input>
								</el-col>
							</el-form-item>

               <el-form-item label='任现职时间'>

								<el-col :span='16' style="overflow:hidden">
									<el-date-picker 
                  :editable = 'false'
										size='small' 
										style='width:46%;float:left' 
										v-model.trim="form.begin_c_cur_job_dt" 
										@change='(value) => form.begin_c_cur_job_dt = value'
										type="month" format='yyyy.MM'>
									</el-date-picker>
									&nbsp;-
									<el-date-picker 
                  :editable = 'false'
										size='small'
										 style='width:46%;float:right' 
										 v-model.trim="form.end_c_cur_job_dt"
										 @change='(value) => form.end_c_cur_job_dt = value'
										  type="month"
										   format='yyyy.MM'>
									</el-date-picker>
								</el-col>

							</el-form-item>


							

              <el-form-item label='出生日期'>

								<el-col :span='16' style="overflow:hidden">
									<el-date-picker 
                    :editable = 'false'
										format='yyyy.MM' 
										size='small' 
										style='width:46%;float:left' 
										v-model.trim="form.begin_birthdate" 
										@change='(value) => form.begin_birthdate = value'
										type="month">
									</el-date-picker>
									&nbsp;-
									<el-date-picker 
                   :editable = 'false'
										format='yyyy.MM' 
										size='small' 
										style='width:46%;float:right' 
										v-model.trim="form.end_birthdate" 
										@change='(value) => form.end_birthdate = value'
										type="month">
									</el-date-picker>
								</el-col>

							</el-form-item>


            

							<el-form-item label='入党时间'>

								<el-col :span='16' style="overflow:hidden">
									<el-date-picker 
										size='small' 
										style='width:46%;float:left' 
										v-model.trim="form.begin_c_party_tim" 
										 @change='(value) => form.begin_c_party_tim = value'
                     :editable = 'false'
										type="month" format='yyyy.MM'>
									</el-date-picker>
									&nbsp;-
									<el-date-picker 
										size='small'
										 style='width:46%;float:right'
										  v-model.trim="form.end_c_party_tim" 
										  @change='(value) => form.end_c_party_tim = value'
										  type="month" format='yyyy.MM'
                      :editable = 'false'
										  >
									</el-date-picker>
								</el-col>

							</el-form-item>


              <el-form-item label='性别'>
								<el-col :span='16'>
									<el-select clearable size='small' multiple  style='width:100%' v-model.trim='form.sex'>
										<el-option label='男' value='男'></el-option>
										<el-option label='女' value='女'></el-option>
										<el-option label='未知' value='未知'></el-option>
									</el-select>
								</el-col>
							</el-form-item>
              

					

						</el-col>

					</el-collapse-item>

			

					<el-collapse-item title="教育信息" name="2">

						<el-col :span='12'>
							<el-form-item label='全日制教育最高学历'>
								<el-col :span='16'>
									<el-select clearable size='small' v-model.trim="form.c_ful_edu_desc" style="width:100%">
										<el-option v-for='(k,i) in qzjyOption' :label='k.c_ful_edu_desc' :value='k.c_ful_edu_desc'></el-option>
									</el-select>
								</el-col>
							</el-form-item>

							<el-form-item label='全日制教育毕业学校'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.c_ful_edu_school'></el-input>
								</el-col>
							</el-form-item>

							<el-form-item label='全日制教育所学专业'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.c_ful_edu_major'></el-input>
								</el-col>
							</el-form-item>
						</el-col>

						<el-col :span='12'>
							<el-form-item label='在职教育最高学位'>
								<el-col :span='16'>
									<el-select clearable size='small' v-model.trim="form.c_wrk_edu_desc" style="width:100%">
										<el-option v-for='(k,i) in zzjyOption' :value='k.c_wrk_edu_desc' :label='k.c_wrk_edu_desc'></el-option>
									</el-select>
								</el-col>
							</el-form-item>

							<el-form-item label='在职教育毕业学校'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.c_wrk_edu_school'></el-input>
								</el-col>
							</el-form-item>

							<el-form-item label='在职教育所学专业'>
								<el-col :span='16'>
									<el-input size='small' v-model.trim='form.c_wrk_edu_major'></el-input>
								</el-col>
							</el-form-item>
						</el-col>

					</el-collapse-item>

				</el-collapse>

				

			</el-form>

			<div style='margin-top:15px'>

				<el-button @click.stop='searchAjax' style='margin:0 15px' type='primary'>搜索</el-button>

				<span class='saveSearch' @click.stop='saveSearch'>保存当前搜索条件</span>

			</div>

		</section>

		<section class='employRostert-table' v-show='tableShow'>
			<div class='table-color'></div>
			<div class="table-form">
				<form method="post" target='employRostert-list' :action='this.Axios.baseURI+"/exReportExcel/empRosterExport"' id='downLoadForm' style='display:none'></form>

				<iframe style='display:none' name="employRostert-list" id="employRostert_hidden_frame"></iframe>

				<el-button type='success' :loading="donwLoadLoading" @click.stop='downLoadExcel'>导出excel表格</el-button>
			</div>
			<div class="table-select">
				<el-button @click.stop='showSelectDialog = true'>自定义表格内容<i class="el-icon-edit el-icon--right"></i></el-button>
			</div>

			<v-table 
				:tableOptionSelect='tableOptionAsync' 
				:tableDatas='tableDatas'></v-table>
			<div class="fenye">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page.pageNum" :page-size="page.pageSize" :page-sizes="[50, 100, 200, 400]" layout="total, sizes, prev, pager, next, jumper" :total="page.total">

				</el-pagination>
			</div>
		</section>

		<v-dialog :dialogShowIf.sync='dialogShowIf' :type='type'>
		</v-dialog>

		<!-- 保存搜索规则 -->

		<!-- 自定义表格显示内容 -->

		<el-dialog 
			custom-class='dialog-check-wrap' 
			title='表格显示的内容' 
			:visible.sync="showSelectDialog" 
			:lock-scroll='false' size='tiny' top='5vh'>
			<div class="dialog-check">
        
				<el-checkbox-group :min="1" v-model.trim='tableOptionSelect'>
					<p v-for='(k,i) in tableOptionDatas'>
						<el-checkbox :label='k.value' >{{k.label}}</el-checkbox>
             <span class="index">
                <img src='../../../static/images/icon_up.svg' :class='{disable:i==0}' @click.stop.lazy='upIndex(i)'>
                <img src='../../../static/images/icon_down.svg' :class='{disable:i==tableOptionDatas.length-1}'  @click.stop.lazy='downIndex(i)'>
              </span>
					</p>
				</el-checkbox-group>
			</div>

			<span slot="footer" class="dialog-footer">
          <el-button type='primary' @click.stop="handleSure">保 存</el-button>
        </span>

		</el-dialog>

	</div>
</template>

<script>
import Vue from 'vue'
import VDialog from '@/components/employRoster/dialog'
import VTable from '@/components/employRoster/tablet'
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'

import {
	MessageBox,
	Message,
	Button,
	Select,
	Input,
	RadioGroup,
	Radio,
	Option,
	Table,
	TableColumn,
	Form,
	FormItem,
	Checkbox,
	CheckboxGroup,
	Pagination,
	Col,
	DatePicker,
	Collapse,
	CollapseItem
} from 'element-ui'
Vue.use(Button)
Vue.use(Select)
Vue.use(Input)
Vue.use(Option)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Pagination)
Vue.use(Col)
Vue.use(DatePicker)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
	components: {
		VDialog,
		VTable
	},
	data () {
		return {
			activeNames: ['1', '2', '3'],
			form: {
				sex: [],
				emplid: '',
				name: '',
				c_current_job: '', //职务
				c_leader_unit: '', //高管单位
				begin_c_cur_job_dt: '', //任现职时间
				end_c_cur_job_dt: '', //任现职时间

				begin_birthdate: '', //出生日期
				end_birthdate: '', //出生日期

				native_place_chn: '', //籍贯
				birthplace: '', //出生地
				ethnic_grp: '', //民族

				political_sta_chn: '', //政治面貌

				begin_c_party_tim: '', //入党时间
				end_c_party_tim: '', //入党时间
				begin_c_work_time: '', //参加工作时间
				end_c_work_time: '', //参加工作时间

				c_ful_edu_desc: '', // 全职教育最高学历
				c_ful_edu_school: '', //全日制教育毕业院校
				c_ful_edu_major: '', //全日制教育专业

				c_wrk_edu_desc: '', //在职教育最高学历
				c_wrk_edu_school: '', //在职教育毕业院校
				c_wrk_edu_major: '' //在职教育系及专业
			},
			cxoOption: [],
			zzmmOption: [],
			qzjyOption: [],
			zzjyOption: [],
			searchVisible: false,
			visible2: false,
			dialogShowIf: false,
			tableShow: false,
			donwLoadLoading: false,

			ajaxFlag: true,
			type: null,
			showSelectDialog: false,
			tableOptionDatas: [],
			tableOptionSelect: [],
			tableOptionAsync: [],
			tableDatas: [],
			searchCheckModel: [],
			searchCheckList: [],
			searchCheckIndex: null,
			page: {
				pageNum: 1,
				pageSize: 50,
				total: 0
			}
		}
	},

	computed: {
		tableSelectLabel () {
			let result = []

			this.tableOptionDatas.forEach((ele, index, arr) => {
				switch (ele.label) {
				case '单位':
					ele.width = 130
					break
				case '职务':
					ele.width = 300
					break

				case '籍贯':
					ele.width = 120
					break
				default:
					break
				}
				if (ele.status) result.push(ele)
			})

			return result
		},
		showColumnsActive () {
			let result = []
			this.tableOptionDatas.forEach((ele, i) => {
				result.push(ele)
				if (this.tableOptionSelect.indexOf(ele.value) != -1) {
					result[i].status = true
				} else {
					result[i].status = false
				}

				if (result[i].width) {
					delete result[i].width
				}
			})
			return result
		}
	},

	mounted () {
		this.getSearchData()
		this.getSelectDown()
	},

	methods: {
		spanClick (i) {
      this.searchCheckModel.splice(i,1,!this.searchCheckModel[i])
			this.handleSearchCheck(i)
		},
		deleteClick (i) {
			this.visible2 = true
			this.searchCheckIndex = i
		},

		upIndex (i) {
			if (i === 0) return
			var a = this.tableOptionDatas[i]

			this.tableOptionDatas.splice(i, 1, this.tableOptionDatas[i - 1])

			this.tableOptionDatas.splice(i - 1, 1, a)
		},

		downIndex (i) {
			const len = this.tableOptionDatas.length

			if (i === len - 1) return

			var a = this.tableOptionDatas[i]

			this.tableOptionDatas.splice(i, 1, this.tableOptionDatas[i + 1])

			this.tableOptionDatas.splice(i + 1, 1, a)
		},
		getSelectDown () {
			this.Axios.Post(this.URL.getExeRosterCondition.url).then(res => {
				const datas = res.data.datas
				this.cxoOption = datas.exunitList
				this.zzmmOption = datas.politicalStaList
				this.qzjyOption = datas.fulEduDescList
				this.zzjyOption = datas.wrkEduDescList
			})
		},

		getParams () {
			let f = this.form
			let params = {
				sex_descr: f.sex.toString(),
				emplid: f.emplid,
				name: f.name,
				c_current_job: f.c_current_job, //职务
				c_leader_unit: f.c_leader_unit, //高管单位
				begin_c_cur_job_dt: f.begin_c_cur_job_dt, //任现职时间
				end_c_cur_job_dt: f.end_c_cur_job_dt, //任现职时间

				begin_birthdate: f.begin_birthdate, //出生日期
				end_birthdate: f.end_birthdate, //出生日期

				native_place_chn: f.native_place_chn, //籍贯
				birthplace: f.birthplace, //出生地
				ethnic_grp: f.ethnic_grp, //民族

				political_sta_chn: f.political_sta_chn, //政治面貌

				begin_c_party_tim: f.begin_c_party_tim, //入党时间
				end_c_party_tim: f.end_c_party_tim, //入党时间
				begin_c_work_time: f.begin_c_work_time, //参加工作时间
				end_c_work_time: f.end_c_work_time, //参加工作时间

				c_ful_edu_desc: f.c_ful_edu_desc, // 全职教育最高学历
				c_ful_edu_school: f.c_ful_edu_school, //全日制教育毕业院校
				c_ful_edu_major: f.c_ful_edu_major, //全日制教育专业

				c_wrk_edu_desc: f.c_wrk_edu_desc, //在职教育最高学历
				c_wrk_edu_school: f.c_wrk_edu_school, //在职教育毕业院校
				c_wrk_edu_major: f.c_wrk_edu_major //在职教育系及专业
			}

			return params
		},

		deleteClick (i) {
			this.visible2 = true
			this.searchCheckIndex = i
		},



		sureDelete () {
			this.visible2 = false
			let del = this.searchCheckList.splice(this.searchCheckIndex, 1)
			let params = {
				conditionName: del[0].conditionName
			}
			this.Axios.Post(this.URL.deleteLeaderCondition.url, params).then(
				res => { }
			)
		},

		handleSizeChange (val) {
			this.page.pageSize = val
			this.getTableData()
		},
		handleCurrentChange (val) {
			this.page.pageNum = val
			this.getTableData()
		},

		downLoadExcel () {
			let params = this.getParams()

			let arrName = Object.keys(params)

			let arrVal = Object.values(params)

			let len = arrName.length

			let formTarget = document
				.querySelector('.employRostert')
				.querySelector('#downLoadForm')
			formTarget.innerHTML = ''

			for (let i = 0; i < len; i++) {
				let dom = document.createElement('input')
				dom.name = arrName[i]
				dom.value = arrVal[i]
				formTarget.appendChild(dom)
			}

			let tokenDom = document.createElement('input')
			tokenDom.name = 'token'
			tokenDom.value = localStorage.getItem('token')
			formTarget.appendChild(tokenDom)

			let selectArrDom = document.createElement('input')
			selectArrDom.name = 'showColumns'
			selectArrDom.value = JSON.stringify(this.showColumnsActive)
			formTarget.appendChild(selectArrDom)

			formTarget.submit()
		},
		handleSearchCheck (i) {
			if (this.searchCheckModel[i]) {
				this.searchCheckModel.forEach((ele, index, arr) => {
					if (index !== i) arr[index] = false
				})

				let params = {
					conditionName: this.searchCheckList[i].conditionName
				}

				this.Axios.Post(this.URL.queryLeaderConditionDetail.url, params).then(
					res => {
						if (res.data.status == 1) {
							const f = this.form,
								datas = res.data.datas;

							(f.emplid = datas.emplid),
							(f.name = datas.name),
							(f.sex = (datas.sex_descr && datas.sex_descr.split(',')) || []),
							(f.c_current_job = datas.c_current_job), //职务
							(f.c_leader_unit = datas.c_leader_unit), //高管单位
							(f.begin_c_cur_job_dt = datas.begin_c_cur_job_dt), //任现职时间
							(f.end_c_cur_job_dt = datas.end_c_cur_job_dt), //任现职时间
							(f.begin_birthdate = datas.begin_birthdate), //出生日期
							(f.end_birthdate = datas.end_birthdate), //出生日期
							(f.native_place_chn = datas.native_place_chn), //籍贯
							(f.birthplace = datas.birthplace), //出生地
							(f.ethnic_grp = datas.ethnic_grp), //民族
							(f.political_sta_chn = datas.political_sta_chn), //政治面貌
							(f.begin_c_party_tim = datas.begin_c_party_tim), //入党时间
							(f.end_c_party_tim = datas.end_c_party_tim), //入党时间
							(f.begin_c_work_time = datas.begin_c_work_time), //参加工作时间
							(f.end_c_work_time = datas.end_c_work_time), //参加工作时间
							(f.c_ful_edu_desc = datas.c_ful_edu_desc), // 全职教育最高学历
							(f.c_ful_edu_school = datas.c_ful_edu_school), //全日制教育毕业院校
							(f.c_ful_edu_major = datas.c_ful_edu_major), //全日制教育专业
							(f.c_wrk_edu_desc = datas.c_wrk_edu_desc), //在职教育最高学历
							(f.c_wrk_edu_school = datas.c_wrk_edu_school), //在职教育毕业院校
							(f.c_wrk_edu_major = datas.c_wrk_edu_major) //在职教育系及专业
						}
					}
				)
			}
		},
		getSearchData () {
			this.Axios.Post(this.URL.queryLeaderBeforeCondition.url).then(res => {
				let list = res.data.datas.showList
				if (list && list.length) {
					this.searchCheckList = list
					list.forEach(element => {
						this.searchCheckModel.push(false)
					})
				}
			})
		},
		handleSure () {
			this.showSelectDialog = false

			this.tableOptionAsync = this.showColumnsActive.filter(ele => ele.status)

			this.tableOptionAsync.forEach(ele => {
				switch (ele.label) {
				case '单位':
					ele.width = 130
					break
				case '职务':
					ele.width = 300
					break

				case '籍贯':
					ele.width = 120
					break
				default:
					break
				}
			})

			let params = {
				showColumns: this.showColumnsActive
			}

			this.Axios.Post(this.URL.saveOrUpdateExShowColumn.url, params).then(
				res => {
					if (res.data.status === 1) {
						Message({ type: 'success', message: '保存成功' })
					} else {
						Message({ type: 'error', message: '保存失败' })
					}
				}
			)
		},

		searchAjax () {
			this.Axios.Post(this.URL.getExUserShowColumn.url).then(res => {
				const datas = res.data.datas.showColumns

				this.tableOptionDatas = datas

				this.tableOptionAsync = this.tableSelectLabel

				this.tableOptionSelect = []

				datas.forEach(ele => {
					if (ele.status) {
						this.tableOptionSelect.push(ele.value)
					}
				})
			})

			this.getTableData()
		},

		getTableData () {
			let params = this.getParams()

			params.pageNum = this.page.pageNum
			params.pageSize = this.page.pageSize

			this.Axios.Post(this.URL.queryExeRosterList.url, params).then(res => {
				let datas = res.data.datas.showList
				this.tableDatas = datas
				this.tableShow = true

				const page = res.data.page
				this.page.pageNum = page.pageNum
				this.page.total = page.total
				setTimeout(() => {
					window.scrollTo(0, document.body.scrollHeight - 720)
				}, 300)
			})
		},

		saveSearch () {
			MessageBox.prompt('请为该搜索条件命名', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /\S/,
				inputErrorMessage: '内容不能为空'
			})
				.then(({ value }) => {
					let params = this.getParams()

					params.conditionName = value

					this.Axios.Post(this.URL.saveLeaderRosterCondition.url, params).then(
						res => {
							if (res.data.status === 1) {
								this.searchCheckList.unshift({ conditionName: value })
								this.searchCheckModel.unshift(false)
								Message({
									type: 'success',
									message: '保存成功'
								})
							}
						}
					)
				})
				.catch(() => { })
		}
	}
}
</script>

<style lang="less" scoped>
.employRostert {
  min-height: 83vh;

  position: relative;
  .formTop-right2 {
    position: absolute;
    left: 36px;
    top: 26px;
    width: 26%;
    border: 1px solid #bfcbd9;
    z-index: 99;
    ::-webkit-scrollbar {
      width: 0px;
    }

    & > h2 {
      background-color: #20a0ff;
      color: #fff;
      text-align: center;
      // font-size: 15px;
      font-weight: normal;
      padding: 6px 0;
      cursor: pointer;
      position: relative;
      & > i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    & > div {
      height: 160px;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: #fff;

      p {
        padding: 8px 0 8px 12px;
        position: relative;

        .check span {
          transform: scale(0.92);
        }
        span.name.select {
          color: #38f;
        }
        span.name {
          cursor: pointer;
          position: relative;
          top: 4px;
          left: 6px;
          font-size: 13px;
          display: inline-block;
          max-width: 170px;
          word-break: keep-all; /* 不换行 */
          white-space: nowrap; /* 不换行 */
          overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
          text-overflow: ellipsis;
        }
        i {
          position: absolute;
          right: 10px;
          margin-top: 6px;
          cursor: pointer;
          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
  .title {
    background-color: #fff;
    h1 {
      text-align: center;
      font-size: 20px;
      padding: 14px 0;
    }
  }
}
</style>
<style lang='less'>
.employRostert {
  /* 表单 (主要内容)*/
  .form {
    height: 100%;
    /* 第一个表单 开始*/
    background-color: #fff;
    padding: 0 20px 50px 20px;
    /* 公用样式开始*/
    .button {
      display: inline-block;
      padding: 5px 16px 4px 16px;
      border: 1px solid #bfcbd9;
      border-radius: 20px;
      margin: 1% 0 1% 8.5%;
      cursor: pointer;
      &:hover {
        color: #20a0ff;
        border-color: #0190fe;
      }
    }
    .button.is-select {
      color: #20a0ff;
      border-color: #0190fe;
    }
    .saveSearch {
      cursor: pointer;
      color: #41b883;
    }
    .close-x {
      position: absolute;
      top: 13px;
      left: 24.4%;
      color: #bfcbd9;
      background-color: #fff;
      cursor: pointer;
    }

    /* 公用样式结束*/
    /* 第一个表单 结束*/
    /* 第二个表单 开始*/
    .formBottom {
      .transition-wrap {
        padding: 7% 0 2% 0;
      }
    }
    /* 第二个表单 结束*/
  }
  .dialog-check-wrap {
    .el-dialog__body {
      padding: 20px 0 5px 0 !important;
    }
    .dialog-check {
      max-height: 400px;
      overflow: auto;

      p {
        padding: 5px 0;
        position: relative;
        position: relative;
        line-height: 30px;
        padding-left: 30px;
        .index {
          position: absolute;
          right: 20px;
          top: 50%;
          margin-top: -12px;
        }
        img {
          width: 22px;
          height: 22px;
          display: inline-block;
          color: #38f;
          cursor: pointer;
          margin: 0 2px;
        }
        .disable {
          cursor: not-allowed;
        }
      }
    }
  }
  /* 表格 (搜索结果)*/
  .employRostert-table {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    .table-color {
      background-color: #e4f0f5;
      height: 10px;
    }
    .table-form {
      display: inline-block;
      padding-top: 15px;
      padding-left: 15px;
    }
    .table-select {
      padding-top: 15px;
      padding-right: 15px;
      text-align: right;
      display: inline-block;
      float: right;
    }
    .fenye {
      padding-bottom: 30px;
      padding-left: 10px;
    }
  }
  /* UI样式修改*/
  // .el-form-item__label {
  //   width: 15%!important;
  // }
  .solong {
    .el-select {
      width: 430px !important;
      .el-input {
        min-height: 100px !important;
        input {
          min-height: 100px !important;
        }
        :-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #fff;
        }
        ::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #fff;
        }
        input:-ms-input-placeholder {
          color: #fff;
        }
        input::-webkit-input-placeholder {
          color: #fff;
        }
      }
      .el-select__tags {
        top: 2px;
        transform: translateY(0);
      }
    }
    .el-select-dropdown {
      min-width: 200px !important;
      max-width: 200px !important;
    }
    // i {
    //   display: none!important;
    // }
  }
  .el-form-item {
    margin-bottom: 10px !important;
  }
  .el-checkbox__inner {
    border-radius: 50% !important;
    border: 1px solid #bfcbd9 !important;
    background-color: #bfcbd9 !important;

    &::after {
      content: '';
      box-sizing: content-box !important;
      border: 2px solid #fff !important;
      border-left: 0 !important;
      border-top: 0 !important;
      height: 8px !important;
      left: 5px !important;
      position: absolute !important;
      top: 1px !important;
      -ms-transform: rotate(45deg) scaleY(1) !important;
      transform: rotate(45deg) scaleY(1) !important;
      width: 4px !important;
      transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s !important;
      -ms-transform-origin: center !important;
      transform-origin: center !important;
      z-index: 909999 !important;
    }
  }

  .el-checkbox__input.is-checked {
    .el-checkbox__inner {
      border: 1px solid #20a0ff !important;
      background-color: #20a0ff !important;
    }
  }
}
</style>
